<template>
  <view
    class="company-card"
    :style="{
      marginBottom,
    }"
    @click.stop="toCard"
  >
    <view class="info">
      <view class="info-logo">
        <TImage
          :src="item.companyLogo"
          width="190rpx"
          height="160rpx"
          border-radius="10rpx"
          error-img-type="unit"
        />
        <view class="social-levelName text-overflow-1">
          {{ item.levelName }}
        </view>
      </view>
      <view class="info-content">
        <view class="company-name disFlxAC">
          <text :class="[fixedHeight ? 'text-overflow-1' : '']">{{ item.companyName }}</text>
        </view>
        <view class="info-content__mid" :style="{ flexWrap: fixedHeight ? 'nowrap' : 'wrap' }">
          <!-- <text v-if="item.applyType === ApplyTypeEnum.PERSON" class="ali-icon">&#xe661;</text> -->
          <image
            v-if="item.applyType === ApplyTypeEnum.PERSON"
            class="member-icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/member-icon-1.png"
          />
          <text class="text-overflow-1">{{ item.leadingName }}</text>
          <text v-if="item.leadingSocialPosition" class="text-overflow-1 ml-5">
            {{ item.leadingSocialPosition }}
          </text>
        </view>
        <scroll-view
          v-if="item.companyMainBusinesList && item.companyMainBusinesList.length"
          :enhanced="true"
          :show-scrollbar="false"
          scroll-x
          enable-flex
          style="width: 100%"
        >
          <view class="card-tags">
            <template v-for="(tag, i) in item.companyMainBusinesList" :key="i">
              <text class="tag-item">{{ tag }}</text>
            </template>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="card-bottom">
      <!-- <view class="company-address text-overflow-1">
        <text>{{ parseAddress(item.companyAddressStr).address }}</text>
      </view> -->
      <view class="card-source" v-if="!hideSource">
        <text>{{ item.orgTenantName }}</text>
        <text class="ali-icon">&#xe66b;</text>
      </view>
      <view class="distance" @click.stop="openLocation(item.companyAddressStr)">
        <text class="ali-icon">&#xe600;</text>
        <text>{{ kmUnit(Number(item.currentDistance)) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type MemberContactsVoList } from '@/api/contactsMap/types';
  import { computed, type PropType } from 'vue';
  import { kmUnit } from '../utils';
  import TImage from '@/components/TImage/index.vue';
  import { useLocation } from '@/hooks/core/useLocation';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { navigateTo } from '@/router';
  import { SourceTypeEnum } from '@/enums/contactsEnum';
  import { useUserStore, useUserStoreWithOut } from '@/store/modules/user';
  import { propTypes } from '@/utils/propTypes';
  import { isLogin, isNullOrUnDef } from '@/utils/is';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { Toast } from '@/utils';
  import { toSelectiveType } from '@/utils/dynamicConfig';

  const { contactsConfig } = useAppStoreWithOut();
  const { currentCocId } = useUserStore();

  const props = defineProps({
    type: {
      type: String as PropType<'swiper' | 'list'>,
      default: 'swiper',
    },
    sourceType: Number as PropType<SourceTypeEnum>,
    item: {
      type: Object as PropType<MemberContactsVoList>,
      required: true,
    },
    marginBottom: propTypes.string,
    fixedHeight: propTypes.bool.def(false),
  });

  const { tenantId } = useUserStoreWithOut();
  const { openLocation } = useLocation();

  const hideSource = computed(
    () => props.sourceType === SourceTypeEnum.INSIDE && props.item?.tenantId == tenantId,
  );

  function toCard() {
    isLogin(() => {
      if (!isNullOrUnDef(props.sourceType)) {
        if (contactsConfig?.unitDetailShow && !currentCocId) {
          // Toast('人脉详情暂未开放，查看请联系管理员');
          uni.showModal({
            title: '提示',
            content: '仅会员可查看人脉详情，请先成为会员',
            confirmText: '成为会员',
            confirmColor: '#2878FF',
            success: ({ confirm }) =>
              confirm &&
              toSelectiveType({
                linkUrl: 'selectiveType',
                isRedirectTo: false,
              }),
          });
          return;
        }
        navigateTo({
          name: 'businessCard',
          options: {
            id: props.item.orgCompanyId,
          },
        });
      } else {
        navigateTo({
          name: 'businessCard',
          options: {
            id: props.item.orgCompanyId,
          },
        });
      }
    });
  }
</script>

<style scoped lang="scss">
  .company-card {
    // border-radius: 30rpx;
    padding: 30rpx;
    padding-bottom: 0;
    background-color: #fff;

    .info {
      // height: 160rpx;
      display: flex;
      align-items: flex-start;

      &-logo {
        width: 190rpx;
        flex-shrink: 0;
        position: relative;
        margin-right: 20rpx;
        background-color: #eee;
        border-radius: 10rpx;
        position: relative;
        .social-levelName {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 40rpx;
          background-color: rgba($color: #000000, $alpha: 0.5);
          text-align: center;
          line-height: 40rpx;
          font-size: 24rpx;
          color: #fff;
          border-radius: 10rpx;
        }
      }

      &-content {
        height: inherit;
        flex: 1;
        font-size: 28rpx;
        color: #333;
        width: calc(100% - 210rpx);

        .company-name {
          display: flex;
          align-items: center;
          font-size: 32rpx;
        }
        &__mid {
          display: flex;
          align-items: center;

          padding: 20rpx 0;
          color: #808080;
          .member-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
          }
        }

        .card-tags {
          display: flex;
          align-items: center;

          .tag-item {
            display: inline-block;
            white-space: nowrap;
            font-size: 24rpx;
            color: #808080;
            padding: 0 16rpx;
            background-color: #f5f5f5;
            // border: 1px solid #dddddd;
            border-radius: 6rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .card-bottom {
      height: 78rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #aaabab;
      .company-address,
      .card-source {
        flex: 1;
      }
      .distance {
        flex: 1;
        text-align: right;
      }
      .ali-icon {
        margin: 0 6rpx;
      }
    }
  }
</style>
